---
import AsideItem from "@components/common/aside/AsideItem.astro";
---

<!-- 目录id="article-catalog" -->
<AsideItem classStyle="${'max-lg:hidden max-lg:h-screen max-lg:w-screen max-lg:top-0 max-lg:fixed max-lg:z-50'}" id="article-catalog">
  <div class="flex flex-col w-full">
    <div class="flex justify-between items-center px-2 py-1 font-semibold text-base text-md-text border-b border-gray-300 dark:border-gray-600 mb-2">
      <span class="text-gray-900 dark:text-white">目录</span>
      <div class="relative flex items-center justify-center">
          <!-- 圆形进度条 -->
          <svg class="w-12 h-12" viewBox="0 0 36 36">
            <!-- 背景圆 -->
            <circle cx="18" cy="18" r="16" fill="none" stroke="#e5e7eb" stroke-width="3" class="dark:stroke-gray-600"/>
            <!-- 进度圆 -->
            <circle 
              cx="18" 
              cy="18" 
              r="16" 
              fill="none" 
              stroke="#3b82f6" 
              stroke-width="3" 
              stroke-linecap="round" 
              class="transition-all duration-300 ease-in-out"
              stroke-dasharray="100" 
              stroke-dashoffset="100" 
              transform="rotate(-90 18 18)"
              id="reading-progress"
            />
          </svg>
          <!-- 中间的百分比文本 -->
          <span class="absolute text-xs font-medium text-gray-600 dark:text-gray-300" id="progress-percentage">0%</span>
      </div>
    </div>
    <div id="aside-catalog-box"></div>
  </div>
</AsideItem>
